<template>
    <div class="goods-soldout">
        <i-card>
            <goods-search>
                <i-poptip slot="left" placement="right" width="400">
                    <i-button type="success">设置</i-button>
                    <div class="setting" slot="content">
                        <i-input class="setting-input" v-model="stockSetting" style="width: 220px">
                            <span slot="prepend">库存低于</span>
                            <span slot="append">警告</span>
                        </i-input>
                        <div class="button-group">
                            <i-button type="info">确定</i-button>
                            <i-button>取消</i-button>
                        </div>
                    </div>
                </i-poptip>
            </goods-search>
            <goods-list :data="data"></goods-list>
        </i-card>
    </div>
</template>
<script>
// custom components
import GoodsList from './components/GoodsList'
import GoodsSearch from './components/GoodsSearch'

export default {
    name: 'goods-soldout',
    data() {
        return {
            stockSetting: '',
            data: [
                {
                    productName:
                        '韩都衣舍2017韩版女装新款黑白拼接插肩棒球服春季短',
                    price: 18,
                    inventory: 23,
                    sales: 321,
                    releaseTime: '2016-10-03'
                }
            ]
        }
    },
    components: {
        GoodsList,
        GoodsSearch
    },
    methods: {
        show(index) {
            this.$Modal.info({
                title: '用户信息',
                content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index]
                    .age}<br>地址：${this.data6[index].address}`
            })
        },
        remove(index) {
            this.data6.splice(index, 1)
        }
    }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/theme/index';
.goods-soldout {
    .setting {
        overflow: hidden;
        height: 34px;
        &-input,
        .button-group {
            float: left;
        }
        .button-group {
            margin-left: 14px;
        }
    }
}
</style>